import React, { useState } from "react";
import { message, Upload, Button, Input } from "antd";
import { Tools } from "../tools/index";
import axios from "axios";
const Home = () => {
  const [file, setFile] = useState("");
  // const [filePath, setFilePath] = useState("");
  // const [fileName, setFileName] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  const props = {
    name: "file",
    action: "http://localhost:3005/upload",
    onChange(info) {
      console.log("info", info);

      const { status } = info.file;
      if (status === "done") {
        getBase64(info.file.originFileObj, (url) => {
          setImageUrl(url);
        });
        setFile(info.file);
        message.success(`${info.file.name} 文件上传成功`);
      } else if (status === "error") {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    showUploadList: false,
    accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
    multiple: true,
    // v:1
  };

  // 文件转换
  // C:\Users\admin\Desktop\004turbofan
  const [fileUrl, setFileUrl] = useState("");
  const queen = async () => {
    // console.log("确认", typeof fileUrl);
    if (fileUrl != null) {
      const res = await axios.get("http://localhost:3005/user/getFile", {
        params: {
          fileUrl,
        },
      });
      // console.log("fileUrl",fileUrl.split("\\"));
      console.log("res",res);
      message.success("转换完成")
    } else {
      message.error("请输入");
    }
  };
  const handleChange = (e) => {
    setFileUrl(e.target.value);
  };

  return (
    <div>
      <div style={{ position: "absolute", top: 0, left: "25%" }}>
        <Tools file={file} imageUrl={imageUrl}></Tools>
      </div>
      <Upload {...props}>
        <Button>上传文件</Button>
      </Upload>
      <div style={{ width: "30%", display: "flex" }}>
        <Input
          value={fileUrl}
          placeholder="请输入文件夹地址"
          onChange={handleChange}
        />
        <Button type="primary" style={{ width: 80 }} onClick={queen}>
          确认
        </Button>
      </div>
      <div
        style={{
          position: "absolute",
          top: "25%",
          left: "25%",
          width: "50%",
          height: "50%",
        }}
      >
        {imageUrl ? (
          <img src={imageUrl} alt="avatar" style={{ width: "100%" }} />
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default Home;
